<template>
  <div>
    <el-card class="box-card" v-show="dialog === 0">
      <!-- 面包屑导航 -->
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row>
        <el-col :span="15">
          <baidu-map
            class="map"
            :ak="map.ak"
            :center="map.center"
            :zoom="map.zoom"
            scroll-wheel-zoom
            dragging
            @ready="handler"
          >
            <el-divider><p style="padding: 0 10px">各仓库地点</p></el-divider>
            <bm-marker
              :position="{ lng: item.lng, lat: item.lat }"
              v-for="(item, index) in datalist"
              :key="item.store_id"
              :title="item.store_name"
              @click="infoWindowOpen(item, index)"
            >
              <bm-label
                :content="item.store_name"
                :labelStyle="{ color: 'red', fontSize: '16px' }"
                :offset="{ width: -35, height: 30 }"
              />
              <!-- <bm-info-window :show="show[index]" @close="infoWindowClose(item,index)" @open="infoWindowOpen(item,index)">我爱北京天安门</bm-info-window> -->
            </bm-marker>
            <bm-view class="bm-view"></bm-view>
          </baidu-map>
        </el-col>
        <el-col :span="9">
          <el-button type="warning" plain @click="reset">重置</el-button>
          <div class="echartBox">
            <a
              href="javascript:;"
              v-for="item in echartslist"
              :key="item.store_id"
              @click="getgoods(item)"
            >
              <el-card class="card2">
                <v-echarts :data="item"></v-echarts>
                <el-divider
                  ><i>{{ item.store_name }}</i></el-divider
                >
                <div
                  style="display: flex; justify-content: center; width: 210px"
                >
                  <el-link
                    v-if="item.rank === 0"
                    type="warning"
                    disabled
                    :underline="false"
                    >货物紧张</el-link
                  >
                  <el-link v-else-if="item.rank === 1" type="success" disabled
                    >货物充足</el-link
                  >
                  <el-link v-else-if="item.rank === 2" type="danger" disabled
                    >货物爆满</el-link
                  >
                </div>
              </el-card>
            </a>
            <!-- <v-echarts v-for="item in datalist" :key="item.store_id"></v-echarts> -->
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" v-show="dialog === 1">
      <el-page-header @back="goBack" :content="headername"> </el-page-header>
      <div class="echartBox">
        <a href="javascript:;" v-for="item in goodslist" :key="item.select_id">
          <el-card class="card2">
            <v-echarts :data="item"></v-echarts>
            <el-divider
              ><i>{{ item.goods.goods_name }}</i></el-divider
            >
            <div style="display: flex; justify-content: center; width: 210px">
              <el-link
                v-if="item.rank === 0"
                type="warning"
                disabled
                :underline="false"
                >商品紧张</el-link
              >
              <el-link v-else-if="item.rank === 1" type="success" disabled
                >商品充足</el-link
              >
              <el-link v-else-if="item.rank === 2" type="danger" disabled
                >商品爆满</el-link
              >
            </div>
          </el-card>
        </a>
        <!-- <v-echarts v-for="item in datalist" :key="item.store_id"></v-echarts> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { goodssum } from "../../http/api";
import vEcharts from "../../components/echarts/liquidfill.vue";
import { mapActions, mapGetters } from "vuex";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";
import BmLabel from "vue-baidu-map/components/overlays/Label.vue";
export default {
  data() {
    return {
      dialog: 0,
      headername: "",
      goodslist: [],
      list: [],
      map: {
        ak: "r6qvYjuCYtTvcc1nEn1TiUeVoCbum5uX",
        center: { lng: 0, lat: 0 },
        zoom: 3,
      },
    };
  },
  components: {
    vEcharts,
    BaiduMap,
    BmView,
    BmMarker,
    BmLabel,
  },
  created() {
    this.getstocklist();
  },
  mounted() {},
  updated() {
    // this.getstocklist();
  },
  methods: {
    ...mapActions({
      getstocklist: "home/getstocksumlistActions",
    }),
    //地图加载完成后
    handler({ BMap, map }) {
      console.log(BMap);
      this.list = this.datalist;
      this.map.center.lng = 105;
      this.map.center.lat = 37;
      this.map.zoom = 5;
    },
    goBack() {
      this.dialog = 0;
      this.goodslist = [];
      this.$forceUpdate();
    },
    getgoods(data) {
      this.headername = data.store_name;
      this.getlist(data);
      this.dialog = 1;
      this.$forceUpdate();
    },
    getlist(item) {
      let that = this;
      goodssum(item).then((res) => {
        if (res.status == 201) {
          res.data.forEach((res) => {
            if (res.rank != 3) {
              this.goodslist.push(res);
            }
          });
          console.log(this.goodslist);
          // this.goodslist=res.data
        } else {
          console.log(res);
          that.$message.error(res.message);
        }
      });
    },
    infoWindowOpen(data, index) {
      console.log(this.show);
      // this.changestocklist(data)
      // this.show[index] = !this.show[index];
      let res = [data];
      this.$store.commit("home/changeechartlist", res);
    },
    reset() {
      console.log("aa");
      this.getstocklist();
    },
    //点击标注打开
  },
  watch: {
    dialog: function (newVal, oldVal) {
      this.$forceUpdate();
      // if(newVal==0){
      // this.$forceUpdate()
      // this.getstocklist()
      // }
    },
  },
  computed: {
    ...mapGetters({
      datalist: "home/datalist",
      echartslist: "home/echartslist",
    }),
  },
  destroyed() {},
};
</script>

<style lang="less" scoped>
.el-button {
  width: 50%;
}
.el-row {
  height: 100%;
}
.el-card {
  max-height: 800px;
}

.el-col {
  max-height: 800px;
}
.el-col:nth-child(1) {
  height: 780px;
}
.el-col:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
.bm-view {
  width: 100%;
  height: 90%;
}
.map {
  width: 100%;
  height: 100%;
}

.echartBox {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  overflow: auto;
  > a {
    width: 250px;
    height: 400px;
    // background: #ddd;
    margin: 10px;
  }
  a {
    text-decoration: none;
  }
  .card2 {
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
}
</style>